<template>
    <div class="order">
        <breadcrumb :routerList="routerList"></breadcrumb>
        <div class="box">
            <el-row type="flex" :gutter="20">
				<el-col :span="22">
					<el-row type="flex" :gutter="15">
						<el-col :span="6">
								<el-date-picker
										v-model="timeVal"
										type="daterange"
										align="right"
										unlink-panels
										range-separator="至"
										start-placeholder="开始日期"
										end-placeholder="结束日期"
										:picker-options="pickerOptions"
									@change="pickTime"
								>
								</el-date-picker>
						</el-col>
						<el-col :span="4">
							<el-input v-model="phone" placeholder="请输入电话号码" clearable></el-input>
						</el-col>
						<el-col :span="4">
							<el-input v-model="fx_user_shop_id" placeholder="请输入店铺Id" clearable></el-input>
						</el-col>
						<el-col :span="4" v-if="$store.state.system_type == 1">
							<el-select v-model="supplier" clearable placeholder="请选择供货商" @change="supplierChange"  >
								<el-option
										v-for="item in supplier_list"
										:key="item.id"
										:label="item.supplier_name"
										:value="item.id"
								>
								</el-option>
							</el-select>
						</el-col>
						<el-col :span="2" >
							<el-button type="primary" @click="searchBtn" icon="el-icon-search">检索</el-button>
						</el-col>
					</el-row>
				</el-col>

				<el-col :span="2" :offset="2">
					<el-button type="primary" @click="exportExcel" icon="el-icon-download">导出</el-button>
				</el-col>
            </el-row>
        </div>
        <div class="table">
            <el-table
                    :data="redundList"
                    style="width: 100%;font-size: 12px"
                    :row-style="{cursor:'pointer'}"
                    row-key="id"
                    border
                    :height="getWinHeight"
                    highlight-current-row
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
			>
                <el-table-column
                        label="收货信息"
						width="100"
                       >
					<template scope="scope">
						<p>{{scope.row.name}}</p>
						<p>{{scope.row.phone}}</p>
					</template>
                </el-table-column>
				<el-table-column
					label="商品信息"
					width="250"
				>
					<template scope="scope">
						<div v-for="(item,index) in scope.row.son" :key="index" class="product-info">
							<div class="info-content">
								<p>商品名称：{{item.product_name}} {{item.attr_list.properties}}</p>
								<p>商品单价：¥{{item.attr_list.price}}</p>
								<p>购买数量：{{item.num}} </p>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column
					label="订单号"
					prop="order_num"
					width="140"
					>
				</el-table-column>
                <el-table-column
                        prop="createtime"
                        label="下单时间"
                width="140">
                    <template scope="scope">
                        <span>{{$util.timeStampToTime(scope.row.createtime)}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="退款状态">
                    <template scope="scope">
                        <el-tag size="mini" v-if="scope.row.tk_status == 0" type="info" effect="dark">待审核</el-tag>
                        <el-tag size="mini" v-if="scope.row.tk_status == 1" type="warning" effect="dark">已退款</el-tag>
                        <el-tag size="mini" v-if="scope.row.tk_status == 2" type="primary" effect="dark">已拒绝</el-tag>
                    </template>
                </el-table-column>
				<el-table-column label="退款金额" prop="tk_price"></el-table-column>
                <el-table-column
                    label="操作"
                    width="200"
                >
                    <template scope="scope">
                        <el-button @click="toCheck(scope.$index,scope.row)" size="mini">退款</el-button>
						<!--<el-button @click="redund(scope.$index,scope.row)" size="mini" v-if="scope.row.tk_status == 0">退款</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
        </div>
		<el-row type="flex" :gutter="20">
			<el-col :span="10" class="total-price">合计订单金额：<span>{{totalPrice}} 元</span></el-col>
			<el-col :span="14">
				<paginationSizeChange :total="total" @sizeChange="sizeChange" @currentPage="currentPage"></paginationSizeChange>
			</el-col>
		</el-row>
    </div>
</template>

<script>
    import breadcrumb from '@/components/breadcrumb.vue'
	import paginationSizeChange from '@/components/paginationSizeChange.vue'
    export default {
        name: "order",
        components:{breadcrumb,paginationSizeChange},
        data(){
            return {
                express:'',
                express_num:'',
                routerList:[
                    {
                        path:'',
                        name:'订单管理'
                    },
                    {
                        path:'/redund_list',
                        name:'退货退款列表'
                    },
                ],
                timeVal:'',
                timeArr:[],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                    ,
                    disabledDate(time){
                        return time.getTime()>Date.now()
                    }
                },
                orderList:[],
				redundList:[],
                total:0,
                supplier:'',
                supplier_id:'',
                status:5,
                statusLabel:'',
                page:1,
				pageNum:this.$store.state.pageNum,
                supplier_list:[],
				phone:'',
				fx_user_shop_id:'',
				totalPrice:0


            }
        },
        beforeCreate(){

        },
        created(){
            this.supplier_id = this.$store.state.supplier_id;
            if(this.$route.query.status != undefined){
                this.status = this.$route.query.status
            }
            for(let i in this.statusList){
                if(this.status == this.statusList[i].value){
                    this.statusLabel = this.statusList[i].label;
                }
            }
			if(this.$route.query.fx_id){
				this.fx_user_shop_id = this.$route.query.fx_id
			}
            this.getSupplierList()
			this.getBackProducts()
        },
        computed:{
            getWinHeight(){
                let winHeight = document.body.clientHeight;
                return winHeight - 260
            }
        },
        methods:{
            async getBackProducts(){
                let res = await this.$Http.getBackproducts({supplier_id: this.supplier_id,start_time:this.timeArr[0],end_time:this.timeArr[1],p:this.page,num:this.pageNum})
                // console.log(res);
                this.redundList = res.list;
                this.total = Number(res.count)
            },
            async getSupplierList(){
                let res = await this.$Http.getSupplier()
                this.supplier_list = res.list;
            },
			async operationRedund(tk_status,order_id){
				let res = await this.$Http.operationRedund({
					tk_status:tk_status,
					order_id:order_id
				})
				console.log(res)
				if(res.code == 200){
					if(tk_status == 1){
						this.$message.success('退款申请已同！')
					}
					if(tk_status== 2){
						this.$message.info('退款申请已拒绝！')
					}
					this.getBackProducts();
				}
			},
            statusChange(value){
                this.status = value
            },
            supplierChange(value){
                this.supplier_id = value
            },
            searchBtn(){
                this.getBackProducts();
            },
            toCheck(index,row){
                console.log(index,row)
                this.$router.push({
                    name: 'redund_details',
                    params: {
                        info: JSON.stringify(row)
                    }
                })
            },
            pickTime(){
                let timeArr = []
				console.log(this.timeVal)
                for(let i in this.timeVal){
                    let time = this.timeVal[i];
                    let year = time.getFullYear();
                    let month = this.$util.checkTime(time.getMonth() + 1);
                    let day = this.$util.checkTime(time.getDate());
                    let stamp = '';
                    if(i == 0){
                       stamp = this.$util.timeToTimestamp(`${year}-${month}-${day} 00:00:00`);
                       timeArr.push(stamp)
                    }
                    if(i == 1){
                        stamp = this.$util.timeToTimestamp(`${year}-${month}-${day} 23:59:59`);
                        timeArr.push(stamp)
                    }
                }
                this.timeArr = timeArr
            },
            currentChange(currentPage){
                this.page = currentPage
                this.getBackProducts()
            },
			//分页条数设置
			sizeChange(val){
				this.pageNum = val;
				this.getBackProducts()
			},
			//分页页数
			currentPage(val){
				this.page = val;
				this.getBackProducts()
			},
			//导出表格
			exportExcel(){
				console.log('导出表格');
                let tableheader = ['订单号','商品名称','商品单价','购买数量','订单价格','收货人','电话','地址','下单时间','是否分销','小店名称','退款状态','退款金额'];
                let data = [];
                let pro = '订单列表';
                let list = this.orderList;
                for(let i in list){
                    let arr = [];
                    let product_name = '';
                    let price = "";
                    let num = ""
                    for(let j in list[i].content){
                        product_name += `  ${list[i].content[j].product_name}`
                        price += `  ${list[i].content[j].attr_list.price}`
                        num += `  ${list[i].content[j].num}`
                    }
                    let address = list[i].sheng + list[i].shi + list[i].qu +list[i].address;
                    let time = this.$util.timeStampToTime(list[i].createtime)
                    let fx = list[i].is_fx == 0?'平台':'分销';
                    let fx_name = list[i].user_shop_content?list[i].user_shop_content.shop_name:'平台'
                    let status = list[i].tk_status == 0?'待退款':(list[i].status == 1?'已退款':(list[i].status == 2?'已拒绝':'其他'))
                    arr.push(list[i].order_num,product_name,price,num,list[i].price,list[i].name,list[i].phone,address,time,fx,fx_name,status,list[i].tk_price)
                    data.push(arr);
                }
                this.$util.exportExcel01(tableheader,pro,data)
			},
			redund(index,row){
				console.log(index,row);
				let tk_status = 0;
				this.$confirm(`订单编号：${row.order_num}，原因：${row.tk_content}，申请退款：${row.tk_price}元`, '退款申请', {
					distinguishCancelAndClose: true,
					confirmButtonText: '同意',
					cancelButtonText: '拒绝'
				})
				.then(() => {
					console.log('同意')
					tk_status = 1;
					this.operationRedund(tk_status,row.id)
				})
				.catch(action => {
					if(action==='cancel'){
						console.log('拒绝')
						tk_status = 2;
						this.operationRedund(tk_status,row.id)
					}else{
						console.log('取消')
					}
				});

			}
        }
    }
</script>

<style scoped>
    .msg-div{
        width: 100%;
        font-size: 12px;
        color:#aaa;
        margin-top: 10px;
    }
	.shop-img{
		margin-right: 15px;
		width: 30px;
		height:30px;
		vertical-align: middle;
		border-radius: 50%;
	}
	.product-info{
		width: 100%;
		display: flex;
		flex-flow:row nowrap;
		align-items: center;
		border-bottom:1px dotted #aaa;
	}
	.product-info:last-child{
		border:none;
	}
	.info-img{
		width: 80px;
	}
	.info-img img{
		width: 100%;
	}
	.info-content{
		font-size: 12px;
		flex:1;
		padding:0 5px;
		box-sizing: border-box;
	}
	.info-content p{
		line-height: 20px;
		margin-bottom:5px;
		margin-top: 0;
	}
	.total-price{
		font-size: 14px;
		color:#888;
		line-height: 50px;
	}
	.total-price span{
		font-size: 18px;
		font-weight: blod;
		color:#E6A23C;
	}
	.el-date-editor--daterange.el-input__inner{
		width:100%;
	}
</style>
